import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import './index.css';

import FormInput from '../../core/components/form.input';
import Table from '../../core/components/table';
import Dialog from '../../core/utils/dialog';
import { Get, Post, getHost, UpdateFile } from '../../core/utils/fetch';
import Header from '../../core/components/header';

let index = 1;

class UserList extends Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.state = {
            userList: [],
            columns: [
                { title: '序号', name: 'id' },
                { title: '姓名', name: 'name' },
                { title: '联系方式', name: 'mobilePhone' },
                { title: '操作', render: this.renderOpertion },
            ]
        };
    }

    renderOpertion = (customer) => {
        return (
            <div>
                <Link to={'/customer-edit?id=' + customer.id}>编辑</Link>
                {'     '}
                <a href='javascript:;' onClick={() => {this.deleteCustomer(customer)}}>删除</a>
            </div>
        );
    };

    _refresh = () => {
        this.refs.table.refresh();
    }

    deleteCustomer = (customer) => {
        Dialog.confirm('你确定要删除吗', () => {
            Get(`/spi/customer/del/${customer.id}`)
                .then(() => {
                    this._refresh();
                });
        });
    }

    render() {
        const { 
            userList,
            columns
        } = this.state;
        return (
            <div>
                <Header title="用户账号管理" subTitle="Customer Manage"></Header>
                <Table
                    ref="table"
                    title="用户账号列表"
                    url={`/spi/customer/list`}
                    paramsJson={false}
                    columns={columns}>
                    <div className="row user-list-row">
                        <div className="col-lg-12">
                            <Link to="/customer-edit" className="btn btn-sm btn-primary pull-right btn-float">新增</Link>
                        </div>
                    </div>
                </Table>
            </div>
        );
    }

    
}

export default UserList;